<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="../source/node_modules/@vue/runtime-dom/dist/runtime-dom.global.js"></script>
    <div id="app"></div>
    <script>
        let { createApp, reactive, ref, h, render,createVNode } = VueRuntimeDOM;
      
        /*
           

            组件什么情况下会更新呢？
                1 自身属性变化
                2 外界属性变化也要更新 ，也就是 props 插槽....

            
             父组件App给子组件My传了一个值name，My接收并且使用了，当父组件更改name的时候，子组件会更新两次

             1 父给子传入属性，属于外界属性。           更新一次  内部会将儿子自身的更新在 更新队列queue 中移除掉，也就是下面的更新
             2 儿子使用了属性，属性发生变化会更新。      更新一次

             注意：就算子组件页面中没有使用该属性，页面不更新，子组件本身的数据状态也要更新。


             queue = [ update ]  

                queue：effect更新队列
                update: h 中使用了this.name，当name变化会有一个effect
               
                 父组件在更新的过程中发现给子组件传了更新的属性，要通知子组件更新 instance.update()
        */  

       const My = {
           props: {
               name:String, // 子组件的外部属性 更新
           },
           render(){
               return h('p',this.name) // 子组件使用了该属性  更新
           }
       }
       const App = {
           setup(){
               const state = reactive({
                   name:'zy'
               })
               setTimeout(() => {
                state.name = 'x'
               },1000)
               return () => {
                   return h('div',{},h(My,{name:state.name}))
               }
           }
       }
       //  创建虚拟节点
       const vnode = createVNode(App)
       // 将虚拟节点渲染成真实节点，并挂载
       render(vnode,document.getElementById('app'))
    </script>
</body>

</html>